<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.6/vue.min.js"></script>
</head>
<body>
<div id="app">
    <div v-if="count > 0">
        大于{{count}}
    </div>
    <div v-if="count < 0 && count > -5">
        大于{{count}}
    </div>
    <div v-else>
        count是{{count}}
    </div>
    <button type="button" @click="change1()">button++</button>
    <button type="button" @click="change2()">button--</button>
</div>
</body>
<script>
    /**
     * v-if
     * v-else , v-else-if
     * v-show
     * v-for
     */
     new Vue({
         el:"#app",
         data:{
             msg: 'hello vue',
             count:0,
         },
         methods:{
             change1:function(){
                this.count++;
             },
             change2:function(){
                 this.count--;
             },
         }
     });
</script>
</html>




























